<template>
<div>
	<ol class="breadcrumb">
      <li class="breadcrumb-item">表情管理</li>
      <li class="breadcrumb-item">表情列表</li>
    </ol>
    <div class="biaoqing-container">
    	<div class="mt-2  clearfloat">
    		<!-- <div @click="sourceSubject('client')"  class="fl cursor btn btn-outline-info btn-sm" :class="{active:sourceType===''}">客户端</div>
    		<div @click="sourceSubject('pc')" class="fl cursor btn btn-outline-info btn-sm ml-3" :class="{active:sourceType===1}">PC端</div> -->
    		<div class="selectoption fl mb-3  flex flex-width-center">
				<div class="selectoption-title">筛选：</div>
				<div class="selectoption-list flex flex-width-center">
					<div @click="setOptionyou" class="selectoption-item ml-2">
						<i class="fa fa-circle-o"
							:class="[option.isYou==='0'? ' fa-circle-o': ' fa-circle']"></i>
						<span>精选</span>
					</div>
					<div @click="setPrivate" class="selectoption-item ml-3">
						<i class="fa " 
						:class="[option.isPrivate==='0'? ' fa-circle-o': ' fa-circle']"></i>
						<span>私密</span>
					</div>
					<div @click="setOptiondel" class="selectoption-item ml-3">
						<i class="fa " 
						:class="[option.isEnable==='1'? ' fa-circle-o': ' fa-circle']"></i>
						<span>被删除</span>
					</div>
					<div @click="setOptionPc" class="selectoption-item ml-3">
						<i class="fa " 
						:class="[option.isType==='1'? ' fa-circle' : ' fa-circle-o']"></i>
						<span>PC端</span>
					</div>
					<div @click="setOptionClient" class="selectoption-item ml-3">
						<i class="fa " 
						:class="[option.isType==='2'? ' fa-circle' : ' fa-circle-o']"></i>
						<span>客户端</span>
					</div>
				</div>
			</div>
			<div class="fl ml-3">
				<span class="color999 hot-message-title">每页显示多少个结果:</span>
				<input type="number" min="10" v-model="option.pageSize" placeholder="每页显示多少个结果" class="hot-message" style="width:80px;" @keyup.enter="goSubject(1)">
				<span class="btn btn-sm btn-info cursor" @click="goSubject(1)">确定</span>
			</div>
    		<div class="fr">
		    	<span class="color999 hot-message-title">热门推送：</span>
		    	<input v-model="hotmessage" type="text" class="hot-message" placeholder="设置热门后推送给用户的消息">
		    	<span class="btn btn-sm btn-info ml-3 mr-4 cursor" @click="setMessage">修改</span>
		    </div>
    	</div>
		
    	<div class="search-subject clearfloat">
    		<div class="input-group fl">
		     	<input @keyup.enter="searchSuject" type="text" class="form-control" v-model="searchKey" placeholder="输入关键词" aria-label="Search for...">
		      	<span class="input-group-btn">
		          <button @click="searchSuject" class="btn btn-secondary" type="button">搜索内容</button>
		        </span>
		    </div>
		    <div class="input-group fl ml-5">
		     	<input @keyup.enter="searchSujectUser" type="text" class="form-control" v-model="searchUserKey" placeholder="输入用户昵称或ID" aria-label="Search for...">
		      	<span class="input-group-btn">
		          <button @click="searchSujectUser" class="btn btn-info" type="button" >搜索用户</button>
		        </span>
		    </div>
		    <div class="fl selectdate flex flex-width-center">
    			<datepicker v-model="date.rangeDate" min="2016-12-01" :max='date.max' :range='date.range' language="cn"></datepicker>
            	<div class="btn btn-secondary cursor" @click="goSubjectDate" >确定</div>
    		</div>
    		<span class="cursor fl pass-success clear-model-user" @click="clearUserSearch">清除用户搜索</span>
    	</div>
    	<ul class="biaoqing-nav nav nav-tabs nav-justified nav-line"  role="tablist">
			<li class="nav-item " v-for="tag in tags.data">
				<a 
				:class="{active:((option.keyword==tag.code || option.keyword==tag.name) )}"
				@click="tagSubject(1,tag.name)">{{tag.name}}
				</a>
			</li>
			<!-- <li class="nav-item">
				<a :class="{active:(enable==false)}" @click="goDelete">回收站</a>
			</li>
			<li class="nav-item">
				<a :class="{active:(you==1)}" @click="youSubject">精选</a>
			</li>
			<li class="nav-item">
				<a :class="{active:(isPrivate==1)}" @click="isPrivatefun">私密</a>
			</li> -->
		</ul>
    	<div class="biaoqing-table">
			<Subjectlist 
				:works="works"
				:tags="tags"
				:keyword="option.keyword"
				:sort="sort"
				:asc="asc"
				:page="page"
				@goSubject="goSubject"
			></Subjectlist>
			<Pagepublic :pages="works" @paging="goSubject"></Pagepublic>
	    </div>
	    <div class="selecTagContainer" :class="{show:(modelUser!='')}">
	    	<div class="selecTag-bg" @click="cancleSelect"></div>
	    	<div class="selecTag-main" :style="'margin-top:-'+modelUserHeight+'px'">
	    		<div class="selecTag-title">选择用户：</div>
	    		<div class="clearfloat">
	    			<table class="table table-bordered">
	    				<thead>
	    					<th>用户名</th>
	    					<th>ID</th>
	    					<th>操作</th>
	    				</thead>
	    				<tbody>
	    					<tr v-for="model in modelUser.items">
	    						<td class="text-overflow max-width200">{{model.name}}</td>
	    						<td>{{model.id}}</td>
	    						<td class="select-user cursor" @click="selectModelUser(model.id)">选择</td>
	    					</tr>
	    				</tbody>
	    			</table>
	    		</div>
	    		<div class="selecTag-btn-box">
	    			<div class="selecTag-btn selecTag-cancle" @click="cancleSelect">取消</div>
	    		</div>
	    	</div>
	    </div>
    </div>
	
</div>
</template>

<script>
import '../../../static/css/biaoqing/biaoqing.css'
import Pagepublic from '../../widgets/pagepublic.vue'
import Subjectlist from '../../widgets/subjectlist.vue'
import datepicker from 'vue-date'
import storage from 'localStorage'
import { Subject,Findip } from '../../resources'
import { formatTime } from '../../misc/utils'
import $ from 'jquery'


export default {
	data: () => ({
		option:{
			pageSize:10,
			isPrivate:'0',
			isYou:'0',
			isEnable:'1',
			isType:'',
			ModelUserId:''
		},
		date: {
			rangeDate:[],
			range:true,
			max:'',
			end:'',
			start:''
		},
		hotmessage:storage.getItem('hotmessage'),
		loading: false,
		searchUserKey:'',
		searchKey:'',
		works:'',
		modelUserHeight:'',
		tags:'',
		sort:'',
		asc:true,
		page:'',
		modelUser:''
	}),
	beforeRouteEnter (to,form,next) {
		var now = new Date();
      	var nowday = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
		var params = {
			pageSize:10,
			pageNum:1,
			enable:1,
			keyword:'0'
		}
		Promise.all([Subject.works(params),Subject.tags()]).then(([works,tags]) => {
			console.log(works)
			for(var i = 0;i<works.data.data.items.length;i++){
				works.data.data.items[i].createTime=formatTime(works.data.data.items[i].createTime)
			}
    		next(vm => {
    			vm.date.rangeDate[0] =nowday;
    			vm.date.rangeDate[1] =nowday;
				vm.date.max =nowday;
    			vm.option.enable=params.enable
    			vm.option.keyword=params.keyword;
    			vm.tags = tags.data;
    			vm.works = works.data.data;
    		})
		})
	},
    mounted () {
      	this.$emit('loaded',false)
    },
    methods: {
    	setOptionPc(){
    		var  isType= this.option.isType;
    		if(isType==''){
    			this.option.isType='1'
    		}else if(isType=='2'){
    			this.option.isType='1';
    		}else{
    			this.option.isType='';
    		}
    		this.goSubject()
    	},
		setOptionClient(){
			var  isType= this.option.isType;
    		if(isType==''){
    			this.option.isType='2'
    		}else if(isType=='1'){
    			this.option.isType='2'
    		}else{
    			this.option.isType='';
    		}
    		this.goSubject()
		},
    	//筛选 start
    	searchSuject(){
    		var searchKey = this.searchKey;
    		if(searchKey==''){
    			searchKey='0';
    		}
			this.option.keyword=searchKey;
			this.goSubject();
    	},
    	setPrivate(){
    		var  isPrivate= this.option.isPrivate;
    		if(isPrivate=='0'){
    			this.option.isPrivate='1'
    		}else{
    			this.option.isPrivate='0';
    		}
    		this.goSubject()
    	},
    	setOptiondel(){
    		var  isEnable= this.option.isEnable;
    		if(isEnable=='0'){
    			this.option.isEnable='1'
    		}else{
    			this.option.isEnable='0';
    		}
    		this.goSubject()
    	},
    	setOptionyou(){
    		var  isYou= this.option.isYou;
    		if(isYou=='0'){
    			this.option.isYou='1'
    		}else{
    			this.option.isYou='0';
    		}
    		this.goSubject()
    	},
    	goSubjectDate(){
    		var range =this.date.rangeDate;
    		if(range.length<=0) return false;
    		this.$emit('loaded',true)
    		var start = range[0]
    		var end = range[1]
    		this.date.start = start;
    		this.date.end = end;
    		this.goSubject()
    	},
    	tagSubject(page,keyword){
			if(keyword=='最新'){
				keyword='0';
			}else if(keyword=='热门'){
				keyword='1';
			}
			this.option.keyword=keyword;
			this.goSubject()
    	},
    	// 清除用户搜索
    	clearUserSearch(){
    		this.option.ModelUserId="";
    		this.searchUserKey="";
    		var params = {
				pageSize:10,
				pageNum:1,
				enable:1,
				keyword:'0'
			}
			this.$emit('loaded',true);
			Promise.all([Subject.works(params)]).then(([works]) => {
				this.$emit('loaded',false);
				for(var i = 0;i<works.data.data.items.length;i++){
					works.data.data.items[i].createTime=formatTime(works.data.data.items[i].createTime)
				}
    			this.enable=1;
    			this.keyword=params.keyword;
    			this.works = works.data.data;
			})
    	},
    	//筛选 end
    	goSubject(page,keyword,sort,asc){
    		this.$emit('loaded',true);
    		var you = this.you;
    		var params = {
				pageSize:this.option.pageSize,
				pageNum:page,
				userId:this.option.ModelUserId,
				startDate:this.date.start,
				endDate:this.date.end,
				keyword:this.option.keyword,
				isPrivate:this.option.isPrivate,
				you:this.option.isYou,
				enable:this.option.isEnable,
				type:this.option.isType
			}
			if(sort && sort!=''){
				params.sort = sort;
				params.asc = asc;
				params.enable=this.enable;
			}else{
				params.sort = this.sort;
				params.asc = this.asc;
			}
			Promise.all([Subject.works(params)]).then(([works]) => {
				$('body,html').animate({scrollTop:0},10);
				this.$emit('loaded',false)
				for(var i = 0;i<works.data.data.items.length;i++){
					works.data.data.items[i].createTime=formatTime(works.data.data.items[i].createTime)
				}
				this.option.pageSize = params.pageSize;
				this.page=params.pageNum
				this.sort=params.sort;
				this.asc=params.asc;
				this.option.keyword=params.keyword;
				this.works=works.data.data;
			})
    	},
    	setMessage(){
    		var hotmessage = this.hotmessage;
    		storage.setItem('hotmessage', hotmessage)
    		swal({type: 'success', title: '修改成功', text: '您的操作已经执行成功!'})
    	},
    	cancleSelect(){
			this.modelUser='';
    	},
    	selectModelUser(id){
			this.option.ModelUserId = id;
			this.modelUser='';
			this.goSubject()
    	},
    	searchSujectUser(){
    		var searchUserKey = this.searchUserKey;
    		if(searchUserKey != ''){
    			this.$emit('loaded',true)
    			var params = {
    				pageSize:10,
					pageNum:1,
					keyword:searchUserKey
				}
				this.$http.get('/user',{params:params}).then( response => {
					this.$emit('loaded',false)
					if(response.data.code==200 && response.data.data.items.length>0){
						this.modelUser=response.data.data;
						var modelUserHeight=(response.data.data.items.length*30+147)/2;
						this.modelUserHeight=modelUserHeight;
					}else{
						this.$notice.error('没有找到任何用户')
					}
				})
    		}
    	},
        openByDialog(){
            this.calendar4.show=true;
        },
        closeByDialog(){
            this.calendar4.show=false;
        },
    },
    components:{Pagepublic,Subjectlist,datepicker}
}
</script>
<style>
	.table td, .table th{
		padding: 5px;
		font-size: 13px;
	}
	.selecTagContainer .table thead th{
		border-bottom: 1px;
	}
	.show{
		display: block;
	}
	.select-user{
		font-size: 13px;
		color: #58c6ff;
	}
	.select-user:hover{
		color: #17b0ff;
	}
	.clear-model-user{
		font-size: 14px;
		line-height: 38px;
		margin-left: 20px;
	}
	.biaoqing-calendar{
		position: relative;
	}
	.selectdate{
		width: 300px;
		height: 38px;
		line-height: 38px;
		margin-left: 20px;
	}
	.selectdate .date-picker{
		flex:1;
	}
	.selectdate .input-wrapper{
		height: 38px;
		padding: 0 10px !important;
	}
</style>
